<template>
  <view class="page container">
    <!-- 审核通过显示切换按钮 -->
    <u-sticky
      v-if="
        userInfo.jiu_shop &&
        userInfo.jiu_shop.id &&
        userInfo.jiu_shop.status == 1
      "
    >
      <view class="bgc-fff" style="padding: 16rpx 32rpx">
        <view class="tabs">
          <view
            class="tab"
            :class="{ 'tab-active': activeTab === '1' }"
            @click="activeTab = '1'"
            >入驻资料</view
          >
          <view
            class="tab"
            :class="{ 'tab-active': activeTab === '2' }"
            @click="activeTab = '2'"
            >账号信息</view
          >
        </view>
      </view>
      <view class="h-28 bgc-f7f8fa"></view>
    </u-sticky>
    <view class="bgc-fff" v-if="activeTab === '1'">
      <u--form
        labelPosition="left"
        :model="formData"
        :rules="rules"
        ref="uForm"
        labelWidth="200rpx"
        errorType="toast"
      >
        <u-form-item label="企业类型：" prop="type" borderBottom>
          <view class="flex-column-center" style="justify-content: flex-end">
            <view class="flex-column-center">
              <block>
                <image
                  class="w-32 h-32"
                  src="/static/is-select.png"
                  v-if="formData.type == '0'"
                >
                </image>
                <image
                  class="w-32 h-32"
                  src="/static/select.png"
                  v-else
                ></image>
              </block>
              <text class="ml-12">酒商</text>
            </view>
            <view class="flex-column-center ml-32">
              <block>
                <image
                  class="w-32 h-32"
                  src="/static/is-select.png"
                  v-if="formData.type == '1'"
                >
                </image>
                <image
                  class="w-32 h-32"
                  src="/static/select.png"
                  v-else
                ></image>
              </block>
              <text class="ml-12">酒厂</text>
            </view>
          </view>
        </u-form-item>
        <u-form-item label="企业名称：" prop="title" borderBottom>
          <u-input
            readonly
            v-model="formData.title"
            border="none"
            inputAlign="right"
            placeholder="请输入企业名称"
          ></u-input>
        </u-form-item>
        <u-form-item label="联系人：" prop="contact_name" borderBottom>
          <u-input
            readonly
            v-model="formData.contact_name"
            border="none"
            inputAlign="right"
            placeholder="请输入联系人姓名"
            fontSize="28rpx"
          ></u-input>
        </u-form-item>
        <u-form-item label="联系方式：" prop="contact_phone" borderBottom>
          <u-input
            readonly
            v-model="formData.contact_phone"
            border="none"
            inputAlign="right"
            placeholder="请输入手机号"
            fontSize="28rpx"
          ></u-input>
        </u-form-item>
        <u-form-item label="所在省市区：" prop="region_name" borderBottom>
          <u-input
            readonly
            v-model="formData.region_name"
            border="none"
            inputAlign="right"
            placeholder="请选择所在省市区"
            fontSize="28rpx"
          >
            <template slot="suffix">
              <u-icon name="arrow-right"></u-icon>
            </template>
          </u-input>
        </u-form-item>
        <u-form-item label="经营位置：" prop="map_address" borderBottom>
          <u-input
            readonly
            v-model="formData.map_address"
            border="none"
            inputAlign="right"
            placeholder="请选择厂区位置"
            fontSize="28rpx"
          >
            <template slot="suffix">
              <image class="w-25 h-32" src="/static/svg/local.svg"></image>
            </template>
          </u-input>
        </u-form-item>
        <u-form-item prop="map_street" borderBottom>
          <view class="pl-28">
            <u-input
              readonly
              v-model="formData.map_street"
              border="none"
              placeholder="请输入详细地址如门牌号等"
              fontSize="28rpx"
            ></u-input>
          </view>
        </u-form-item>
        <u-form-item label="营业执照：" prop="license" labelPosition="top">
          <view class="pl-28 mt-16 flex-row-between">
            <image
              class="w-284 h-204 br-12"
              :src="formData.license || '/pages2/static/upload-img.png'"
            >
            </image>
            <!-- 详情时展示，审核状态 -->
            <view style="margin-top: -55rpx" v-if="userInfo.jiu_shop.id">
              <image class="w-140 h-140" :src="getStatusImg"></image>
            </view>
          </view>
        </u-form-item>
		<u-form-item v-if="formData.type=='0'" label="门头照片：(至多一张)" prop="logo" labelPosition="top" labelWidth="400rpx">
		  <view class="pl-28 mt-16">
		    <image class="w-284 h-204 br-12" :src="formData.logo || '/pages2/static/upload-img.png'"></image>
		  </view>
		</u-form-item>
        <u-form-item
          label="简介："
          prop="content"
          borderBottom
          labelPosition="top"
        >
          <!-- <u-input v-model="formData.content" border="none" type="textarea" placeholder="请输入企业简介"
            fontSize="28rpx"></u-input> -->
          <view class="pl-28 mt-16">
            <view class="bgc-f7f8fa">
              <u-textarea
                disabled
                v-model="formData.content"
                border="none"
                height="268rpx"
                placeholder="请输入企业简介"
              ></u-textarea>
            </view>
          </view>
        </u-form-item>
      </u--form>
    </view>
    <view
      class="bgc-fff ml-28 mr-28 pad-28 fs-28 br-12"
      v-if="activeTab === '2'"
    >
      <view class="flex-column-center mb-20">
        <view class="c-677585 mr-16">PC管理端地址：</view>
        <view class="break-all">{{ pc_url }}</view>
      </view>
      <view class="flex-column-center mb-20">
        <view class="c-677585 mr-16">登录账号：</view>
        <view class="break-all">{{ admin_name }}</view>
      </view>
      <view class="flex-column-center mb-20">
        <view class="c-677585 mr-16">登录密码：</view>
        <view class="break-all">{{ admin_pwd }}</view>
      </view>
      <view class="flex-center-center mt-20">
        <view
          class="btn-active w-132 h-56 flex-center-center bgc-fff br-8 c-c5261d fs-24"
          style="border: 1px solid #c5261d"
          @click="copyPcText"
          >一键复制</view
        >
      </view>
    </view>
    <view
      class="bottom-box pl-32 pr-32"
      v-if="!userInfo.jiu_shop.id || userInfo.jiu_shop.status !== 0"
    >
      <!-- 审核通过显示修改按钮 -->
      <view class="flex-between-center" style="width: 100%">
        <!-- 审核驳回显示驳回原因按钮 -->
        <u-button
          v-if="userInfo.jiu_shop.status == 2"
          :customStyle="{
            backgroundColor: '#fff',
            color: '#677585',
            borderRadius: '10rpx',
            height: '88rpx',
            fontSize: '32rpx',
            border: '1px solid #677585',
            marginRight: '30rpx',
          }"
          @click="onShowCauseOfRejection"
          >驳回原因</u-button
        >
        <u-button
          @click="$utils.redirectTo('/pages2/my/apply_enter_factory')"
          :customStyle="{
            backgroundColor: '#C5261D',
            color: '#fff',
            borderRadius: '10rpx',
            height: '88rpx',
            fontSize: '32rpx',
            border: 'none',
          }"
          >修改资料</u-button
        >
      </view>
    </view>
    <cause-of-rejection-pop
      :content="formData.audit_remark || '暂无驳回原因'"
      :audit_time_text="formData.audit_time_text || ''"
      ref="causeOfRejectionPopRef"
    ></cause-of-rejection-pop>
  </view>
</template>

<script>
import { mapState, mapActions } from "vuex";
import { applyEnterFactoryDetailApi } from "@/services/my";
import CauseOfRejectionPop from "@/pages2/components/CauseOfRejectionPop.vue";
export default {
  components: {
    CauseOfRejectionPop,
  },
  data() {
    return {
      activeTab: "1",
      formData: {},
      addressText: "", // 显示用的地址文本
      pc_url: "",
      admin_name: "",
      admin_pwd: "",
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
    getStatusImg() {
      switch (+this.userInfo?.jiu_shop?.status) {
        case 0:
          return "/pages2/static/shenhezhong.png";
        case 1:
          return "/pages2/static/shenhetongguo.png";
        case 2:
          return "/pages2/static/shenhejujue.png";
        default:
          return "";
      }
    },
  },
  onLoad(options) {
    const { toast } = options;
    if (toast && toast == 1) {
      this.$u.toast("提交成功");
    }
    this.getUserInfo().then(() => {
      const { jiu_shop } = this.userInfo;
      if (jiu_shop.id) {
        this.getApplyEnterFactoryDetail();
      }
    });
    this.pc_url = `${this.$config.domain}/xyz.php/index/login`;
    this.pc_account = "15278789696";
    this.pc_password = "123456";
  },
  methods: {
    ...mapActions({
      getUserInfo: "user/getUserInfo",
    }),
    onShowCauseOfRejection() {
      this.$refs.causeOfRejectionPopRef.open();
    },
    getApplyEnterFactoryDetail() {
      applyEnterFactoryDetailApi().then((res) => {
        if (res && res.data) {
          const data = res.data?.shop_info;
          this.admin_name = data.admin_name;
          this.admin_pwd = data.admin_pwd;
          // 处理图片数组
          let images = [];
          if (data.images) {
            const imageUrls = data.images.split(",");
            images = imageUrls.map((url) => ({
              fullurl: url,
              urls: url,
            }));
          }

          this.formData = {
            ...data,
            images,
          };
        }
      });
    },
    copyPcText() {
      uni.setClipboardData({
        data: `${this.pc_url}\n${this.admin_name}\n${this.admin_pwd}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  padding-bottom: 188rpx;
  background-color: #f7f8fa;

  /deep/.u-form-item__body {
    padding-top: 28rpx;
    padding-bottom: 28rpx;
  }

  /deep/.u-form-item__body__left {
    padding-left: 28rpx;
  }

  /deep/.u-form-item__body__left__content__label {
    font-size: 28rpx !important;
  }

  /deep/.u-form-item__body__right {
    padding-right: 28rpx;
  }

  /deep/.u-textarea {
    background-color: transparent;
  }

  .bottom-box {
    padding-top: 16rpx;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 168rpx;
    background-color: #fff;
    z-index: 99;
    box-shadow: 0rpx 0rpx 12rpx rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
  }

  .tabs {
    width: 686rpx;
    height: 68rpx;
    border-radius: 12rpx;
    background: #f7f8fa;
    display: flex;
    justify-content: space-between;

    .tab {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      font-weight: 500;

      &-active {
        border-radius: 12rpx;
        background: $theme-color;
        color: #fff;
      }
    }
  }
}
</style>